<template>
  <div class="body">
    <div class="select">
      <div class="block">
          <el-cascader
            v-model="name"
            :options="options1"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"></el-cascader>
        </div>
      <el-button plain class="btn" @click="select()">查询</el-button>
    </div>
    <div id="map"></div>
  </div>
</template>
<script>
// import { postKeyValueRequest } from "../utils/api";
import axios from "axios";

export default {
  name: "MainPage",
  data() {
    return {
      map: {},
      lnglats: [],
      dian: [],
      options: [
        //地区
        // {
        //   value: "选项1",
        //   label: "黄金糕",
        // },
        // {
        //   value: "选项2",
        //   label: "双皮奶",
        // },
      ],
      name: "",
      options1: []
    };
  },
  mounted() {
    this.address();
    this.load();
    // this.select();
    // postKeyValueRequest("/getAddressBy").then((resp) => {
    //   this.dian = resp
    //   console.log(this.dian)
    //   this.load();
    // });
  },
  methods: {
    address() {
      axios.post("/getAddress", {}).then((res) => {
        this.options1 = res;
        console.log(res);
      });
    },
    select() {
      axios
        .post("/selectAddressBySSX", {
          name: this.name,
        })
        .then((res) => {
          this.lnglats = res;
          console.log(this.lnglats);
          // this.load()
          var T = window.T;
          this.map.clearOverLays();
          for (var i = 0; i < this.lnglats.length; i++) {
            let content = this.lnglats[i].name;
            let marker = new T.Marker(
              new T.LngLat(this.lnglats[i].jd, this.lnglats[i].wd)
            );
            this.map.addOverLay(marker);
            this.addClickHandler(content, marker);
          }
        });
    },
    //载入地图
    load() {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          console.log("地图初始化成功");
          resolve(window.T);
          reject("error");
        }
      });
      init.then((T) => {
        this.map = new T.Map("map");
        var ctrl = new T.Control.MapType();
        this.map.addControl(ctrl);
        this.map.centerAndZoom(new T.LngLat(120, 29), 8);
      });
    },

    addClickHandler(content, marker) {
      marker.addEventListener("click", (e) => {
        this.openInfo(content, e);
      });
    },
    openInfo(content, e) {
      let T = window.T;
      let point = e.lnglat;
      this.marker = new T.Marker(point); // 创建标注
      let markerInfoWin = new T.InfoWindow(content, {
        offset: new T.Point(0, -30),
      }); // 创建信息窗口对象
      this.map.openInfoWindow(markerInfoWin, point); //开启信息窗口
    },
  },
};
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
.select {
  position: absolute;
  top: 8%;
  left: 5%;
  right: 75%;
  z-index: 999;
}
.select .btn {
  margin-left: 0px;
  height: 40px;
  width: 80px;
}
</style>